<template>
	<van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="refDisabled">
		<div class="content"  ref="pageInfo">
			<div class="tops">
				<img class="img" src="@/assets/img/index/top.png" alt="">
			</div>
			<div class="info">
				<div class="lists">
					<div @click="toPageLink(v)" class="deptItems flex2" v-for="(v,i) in deptList" :key='i'>
						<div class="dot"></div>{{v.biaoti||''}}
					</div>
				</div>
			</div>
			<back-img></back-img>
		</div>
		
	</van-pull-refresh>
</template>

<script>
	export default {
		data() {
			return {
				deptList: [],
				isLoading: false,
				scrollTop:0,
				refDisabled:false,

			};
		},
		created() {
			this.petList()
		},
		mounted(){
			let box = this.$refs.pageInfo;
			box.addEventListener('scroll',()=>{
				this.scrollTop = box.scrollTop;
			});
		},
		watch: {
			scrollTop(val){
				if(val==0){
					this.refDisabled=false
				}else{
					this.refDisabled=true
				}
			}
		},
		methods: {
			onRefresh() {
				this.petList()
				setTimeout(() => {
					this.isLoading = false;
				},500);
			},
			petList() {
				let url = "/api/his/dept_intro";
				this.$axios.get(url).then(res => {
						console.log("res", res);
						this.deptList = res.ack_info
					})
					.catch(err => {
						console.log("err", err);
					});
			},
			toPageLink(v) {
				this.$router.push({
					path:'/deptShow',
					query: {
						id:v.id,
						name:v.biaoti
					},
				})
			},
		}
	};
</script>

<style lang="less" scoped>
	.content {
		min-height: 100vh;
		height: auto;
		background-color: #f0f8f8;
		padding-bottom: 20px;
		position: relative;
		.info{
			width:100%;
			padding:14px 16px;
			position: inherit;
			z-index: 9;
			.lists{
				padding:0 12px;
				min-height:320px;
				background: #fff;
				border-radius: 10px;
				.deptItems{
					padding: 16px 0;
					font-size: 15px;
					color: #333;
					border-top: 1px solid #ededed;
					.dot{
						width: 8px;
						height: 8px;
						border-radius: 50%;
						background: #3EC5DB;
						margin-right:6px;
					}
				}
			}
		}
	    .tops{
			width: 100%;
			height:192px;
			position: absolute;
			top: 0;
			.img{
				width: 100%;
				height:192px;
			}
		}
	}
</style>